<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
<div id="app">
    <h1 v-for="n in userList">{{n.name}}</h1>
</div>
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
<script>
    //创建一个Vue对象
    new Vue({
        el: '#app',//绑定vue作用范围
        data: {//定义页面中显示的模型数据
            userList: []
        },
        created() {
            this.getUserList()
        },
        methods: {
            getUserList() {
                axios.get("data.json")//axios.提交方式("请求接口路径")
                    .then(response=>{
                        this.userList=response.data.data.items
                        console.log(this.userList)
                        // console.log('-------'+response)
                    })//请求成功后执行
                    .catch(error=>{

                    })//请求失败执行
            }
        }
    })
</script>
</body>

</html>